<template>
  <div class="boxgap">
    <div class="nbox1">
      <div class="__box pd2 bg5">
        <div class="__title">内容字体：</div>
        <div class="__div">
          <n-space>
            <n-button
              @click="
                cfg.mldiycss[
                  '--ml-family'
                ] = `HarmonyOS_Medium,HarmonyOS_Medium !important`;
                cfg.upd_diy();
              "
              >默认</n-button
            >
            <n-button
              @click="
                cfg.mldiycss['--ml-family'] = `initial`;
                cfg.upd_diy();
              "
              >系统</n-button
            >
            <n-button
              @click="
                cfg.mldiycss['--ml-family'] = `oppo_sans,oppo_sans !important`;
                cfg.upd_diy();
              "
              >OPPO</n-button
            >
            <n-button
              @click="
                cfg.mldiycss[
                  '--ml-family'
                ] = `HarmonyOS_Regular,HarmonyOS_Regular !important`;
                cfg.upd_diy();
              "
              >鸿蒙OS[1]</n-button
            >
            <n-button
              @click="
                cfg.mldiycss[
                  '--ml-family'
                ] = `HarmonyOS_Medium,HarmonyOS_Medium !important`;
                cfg.upd_diy();
              "
              >鸿蒙OSS[2]</n-button
            >
            <n-button
              @click="
                cfg.mldiycss[
                  '--ml-family'
                ] = `AlimamaFangYuanTiVF,AlimamaFangYuanTiVF !important`;
                cfg.upd_diy();
              "
              >阿里妈妈方圆体</n-button
            >
          </n-space>
        </div>
      </div>
      <div class="__box pd2 bg5">
        <div class="__title">[通用]背景图片开关：</div>
        <div class="__div">
          <n-button
            @click="
              cfg.mldiycss['--ml-nonebg'] = `none`;
              cfg.upd_diy();
            "
            >关闭</n-button
          >
          <n-button
            @click="
              cfg.mldiycss['--ml-nonebg'] = `block`;
              cfg.upd_diy();
            "
            >开启</n-button
          >
        </div>
      </div>
      <div class="__box pd2 bg5" v-if="cfg.mobile == true">
        <div class="__title">[移动端]左右边距%：</div>
        <div class="__div">
          <n-input-number
            @update:value="(value) => set.number('--ml-bjvw', value)"
            v-model:value="cfg.mldiycss['--ml-bjvw']"
          />
          <n-button @click="set.number('--ml-bjvw', 2.5)">默认</n-button>
        </div>
      </div>
      <div class="__box pd2 bg5" v-if="cfg.mobile == false">
        <div class="__title">[电脑端]内容区宽度：</div>
        <div>
          <n-space>
            <n-button
              @click="
                cfg.mldiycss['--bdw'] = `1200px`;
                cfg.upd_diy();
              "
              >默认</n-button
            >
            <n-button
              @click="
                cfg.mldiycss['--bdw'] = `100%`;
                cfg.upd_diy();
              "
              >铺满</n-button
            >
          </n-space>
        </div>
      </div>
      <div class="__box pd2 bg5" v-if="cfg.mobile == false">
        <div class="__title">[电脑端]内容区毛玻璃厚度：</div>
        <div class="__div">
          <n-input-number
            @update:value="(value) => set.number('--ml-boxmbl', value)"
            v-model:value="cfg.mldiycss['--ml-boxmbl']"
          />
          <n-button @click="set.number('--ml-boxmbl', 0)">不使用</n-button>
          <n-button @click="set.number('--ml-boxmbl', 20)">默认</n-button>
        </div>
      </div>
      <div class="__box pd2 bg5" v-if="cfg.mobile == true">
        <div class="__title">[手机端]内容区毛玻璃厚度：</div>
        <div class="__div">
          <n-input-number
            @update:value="(value) => set.number('--ml-boxmbl-mb', value)"
            v-model:value="cfg.mldiycss['--ml-boxmbl-mb']"
          />
          <n-button @click="set.number('--ml-boxmbl-mb', 0)">不使用</n-button>
          <n-button @click="set.number('--ml-boxmbl-mb', 5)">默认</n-button>
        </div>
      </div>
      <div class="__box pd2 bg5" v-if="cfg.mobile == false">
        <div class="__title">[电脑端]内容区背景颜色：</div>
        <div class="__div">
          <n-color-picker
            @update:value="(value) => set.number('--ml-bodybg', value)"
            v-model:value="cfg.mldiycss['--ml-bodybg']"
          />
          <n-button @click="set.number('--ml-bodybg', 'rgba(42, 45, 62, 0.8)')"
            >默认</n-button
          >
        </div>
      </div>
      <div class="__box pd2 bg5">
        <div class="__title">内容块背景颜色：</div>
        <div class="__div">
          <n-color-picker
            @update:value="(value) => set.number('--bg5', value)"
            v-model:value="cfg.mldiycss['--bg5']"
          />
          <n-button @click="set.number('--bg5', 'rgba(49,101,126 , 0.5)')">默认</n-button>
        </div>
      </div>
      <div class="__box pd2 bg5" v-if="cfg.mobile == true">
        <div class="__title">[手机端]内容区背景颜色：</div>
        <div class="__div">
          <n-color-picker
            @update:value="(value) => set.number('--ml-bodybg-mb', value)"
            v-model:value="cfg.mldiycss['--ml-bodybg-mb']"
          />
          <n-button @click="set.number('--ml-bodybg-mb', 'rgba(42, 45, 62, 0.55)')"
            >默认</n-button
          >
        </div>
      </div>
      <div class="__box pd2 bg5">
        <div class="__title">普通文字颜色：</div>
        <div class="__div">
          <n-color-picker
            @update:value="(value) => set.number('--c4', value)"
            v-model:value="cfg.mldiycss['--c4']"
          />
          <n-button @click="set.number('--c4', 'rgba(255, 255, 255, 0.82)')"
            >默认</n-button
          >
        </div>
      </div>
      <div class="__box pd2 bg5">
        <div class="__title">自定义背景图片：</div>
        <n-image-group>
          <n-space>
            <template v-for="item in set.tk">
              <n-image
                v-if="item.type == 's'"
                width="80"
                height="120"
                preview-disabled
                @click="set.newbgurl(item.src)"
                :src="item.msrc ?? item.src"
              />
            </template>
          </n-space>
          <n-space>
            <template v-for="item in set.tk">
              <n-image
                v-if="item.type == 'l'"
                width="120"
                height="70"
                preview-disabled
                @click="set.newbgurl(item.src)"
                :src="item.msrc ?? item.src"
              />
            </template>
          </n-space>
        </n-image-group>

        <n-input @input="set.bgurl" v-model:value="cfg.mldiycss['--ml-bgurl']"></n-input>
      </div>
    </div>
  </div>
</template>
<style scoped>
.__box {
  gap: 0.75em;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.__title {
  flex: 1;
}
.__div {
  display: flex;
  gap: 0.75em;
}
</style>
<script>
import { cfg } from "@/cfg/cfg.js";

export default {
  setup() {
    const set = {
      number: (key, value) => {
        cfg.mldiycss[key] = value;
        cfg.upd_diy();
      },
      tk: [
        {
          type: "s",
          msrc: "https://tuku.ww2.ren/i/2025/11/11/6912b3c5dcce5.png",
          src: "https://tuku.ww2.ren/i/2025/11/11/6912b3c5dcce5.png",
        },
        {
          type: "s",
          msrc:
            "https://patchwiki.biligame.com/images/gt/thumb/6/62/ndwcjyixtej0u8qwwckbt8vduges056.jpg/423px-2024%E5%84%BF%E7%AB%A5%E8%8A%82.jpg",
          src:
            "https://patchwiki.biligame.com/images/gt/a/a5/07ngp6xg77daci182hve1lixnd8qqu7.png",
        },
        {
          type: "s",
          msrc:
            "https://patchwiki.biligame.com/images/gt/thumb/f/f1/lwt4vg1u5bih9wz0a40io48ntup98ms.jpg/277px-%E5%84%BF%E7%AB%A5%E8%8A%82%E7%AB%96%E7%89%88.jpg.png",
          src:
            "https://patchwiki.biligame.com/images/gt/f/f1/lwt4vg1u5bih9wz0a40io48ntup98ms.jpg",
        },
        {
          type: "l",
          msrc:
            "https://patchwiki.biligame.com/images/gt/thumb/b/bf/6ww0xo8y5c6m1cj6zdgsbc3x5econil.jpg/800px-%E5%84%BF%E7%AB%A5%E8%8A%82%E6%A8%AA%E7%89%88.jpg",
          src:
            "https://patchwiki.biligame.com/images/gt/b/bf/6ww0xo8y5c6m1cj6zdgsbc3x5econil.jpg",
        },
        {
          type: "l",
          msrc:
            "https://patchwiki.biligame.com/images/gt/thumb/8/8b/bgnos1tf320k2c0xfvcx1logemk9rkp.jpg/800px-4%E5%91%A8%E5%B9%B4%E8%83%8C%E6%99%AF.jpg",
          src:
            "https://patchwiki.biligame.com/images/gt/8/8b/bgnos1tf320k2c0xfvcx1logemk9rkp.jpg",
        },
        {
          type: "l",
          msrc:
            "https://patchwiki.biligame.com/images/gt/thumb/d/db/dgjm87biqs5csmq2tyu8howxwuplqtu.png/800px-3%E5%91%A8%E5%B9%B4%E8%83%8C%E6%99%AF.png",
          src:
            "https://patchwiki.biligame.com/images/gt/d/db/dgjm87biqs5csmq2tyu8howxwuplqtu.png",
        },
        {
          type: "l",
          msrc:
            "https://patchwiki.biligame.com/images/gt/thumb/c/c7/ip9ehp92gzbk11uxqgpusf7dpzmq4v6.png/800px-2%E5%91%A8%E5%B9%B4%E8%83%8C%E6%99%AF.png",
          src:
            "https://patchwiki.biligame.com/images/gt/c/c7/ip9ehp92gzbk11uxqgpusf7dpzmq4v6.png",
        },
        {
          type: "l",
          msrc:
            "https://patchwiki.biligame.com/images/gt/thumb/3/3c/mdwzilpx438uc8mx4xk4mkpwqsnh2rh.png/800px-%E5%9D%8E%E5%85%AC%E4%B8%80%E5%91%A8%E5%B2%81.png",
          src:
            "https://patchwiki.biligame.com/images/gt/3/3c/mdwzilpx438uc8mx4xk4mkpwqsnh2rh.png",
        },
        {
          type: "l",
          msrc:
            "https://patchwiki.biligame.com/images/gt/thumb/7/74/co4amx41artc9i1va22vvbkvdldm0ll.jpg/800px-%E6%B8%85%E6%98%8E%E8%8A%82.jpg",
          src:
            "https://patchwiki.biligame.com/images/gt/7/74/co4amx41artc9i1va22vvbkvdldm0ll.jpg",
        },
        {
          type: "l",
          msrc:
            "https://patchwiki.biligame.com/images/gt/thumb/1/11/acsnlmw8oxero8l14p8cnvvzugtqslo.jpg/800px-%E5%9D%8E%E5%85%AC%E5%8D%8A%E5%91%A8%E5%B2%81.jpg.png",
          src:
            "https://patchwiki.biligame.com/images/gt/1/11/acsnlmw8oxero8l14p8cnvvzugtqslo.jpg",
        },
        {
          type: "l",
          msrc:
            "https://patchwiki.biligame.com/images/gt/thumb/f/f1/8v0hfri7h7te1u3dacj46dndrkcrx3q.jpg/800px-%E6%98%A5%E8%8A%82.jpg",
          src:
            "https://patchwiki.biligame.com/images/gt/f/f1/8v0hfri7h7te1u3dacj46dndrkcrx3q.jpg",
        },
        {
          type: "l",
          src:
            "https://patchwiki.biligame.com/images/gt/9/99/80eczwsl8mzduv7n741uaa2cblyxhj8.jpg",
        },
        {
          type: "l",
          src:
            "https://patchwiki.biligame.com/images/gt/3/3e/6i2w7nn4t5a8rz1g119dim0z2dc9a4g.jpg",
        },
        {
          type: "l",
          msrc:
            "https://patchwiki.biligame.com/images/gt/thumb/6/6a/tds5pt423aggr7ctz41a8yzy7aa2ii8.png/800px-%E8%87%AA%E7%94%B1%E6%9D%BE%E9%BC%A0%E5%85%8B%E8%8E%89%E5%B8%8C%E5%B0%94%E9%AB%98%E6%B8%85%E5%A3%81%E7%BA%B8.png",
          src:
            "https://patchwiki.biligame.com/images/gt/6/6a/tds5pt423aggr7ctz41a8yzy7aa2ii8.png",
        },
      ],

      bgurl: (url) => {
        cfg.upd_diy();
      },
      newbgurl: (url) => {
        cfg.mldiycss["--ml-bgurl"] = `url(${url})`;
        cfg.upd_diy();
      },

      img_bnpx: (px) => {
        cfg.diy_img_bnpx = px;
        if (px == null) {
          cfg.diy_img_bnpx = 0.6;
        } else {
          if (px <= 0) {
            cfg.diy_img_bnpx = 0.6;
          }
        }
        localStorage.setItem("diy_img_bnpx", cfg.diy_img_bnpx);
      },

      diy_mblps: (tp) => {
        cfg.mblps = tp;
        localStorage.setItem("diy_mblps", cfg.mblps);
      },
    };
    const val = reactive({});

    onMounted(async () => {});
    return { cfg, set };
  },
};
</script>
